<template>
  <ol id="breadcrumb-item-hyl" class="breadcrumb">
    <li class="breadcrumb-item" :key="index" v-for="(item, index) in list">
      <span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
      <router-link :to="item" v-else>{{ showName(item) }}</router-link>
    </li>
  </ol>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true,
      default: () => []
    }
    // computed: {
    //   // 计算属性的 getter
    //   getList: function () {
    //     // `this` 指向 vm 实例
    //     return this.$store.commit('SET_ROUTERS', this.list)
    //   }
    // }
  },
  created: function () {
    this.getList()
  },
  methods: {
    getList () {
      this.$store.commit('SET_ROUTERS', this.list)
    },
    isLast (index) {
      return index === this.list.length - 1
    },
    showName (item) {
      if (item.meta && item.meta.label) {
        item = item.meta && item.meta.label
      }
      if (item.name) {
        item = item.name
      }
      return item
    }
  }
}
</script>
<style>
  #breadcrumb-item-hyl{
    margin-bottom: 8px
  }
</style>
